import React from 'react'
import { Box, Divider, styled } from '@mui/material'

const Root = styled(Box)(({ theme }) => ({
  padding: '40px 20px',
  marginBottom: 10,
  border: '1px solid rgba(5, 5, 5, 0.2)',
  borderRadius: 4,
  '&>div:first-of-type': {
    marginBottom: 20,
    '&>div:first-of-type': {
      fontSize: 20,
      height: 20,
      lineHeight: '20px',
      fontWeight: 700,
      color: '#333',
      marginBottom: 12,
      position: 'relative',
      paddingLeft: 15,
      '&::before': {
        content: '""',
        position: 'absolute',
        left: -5,
        top: 2,
        width: '10px',
        height: '10px',
        borderRadius: '50%',
        border: `3px solid ${theme.palette.primary.main}`,
      },
    },
    '&>div:last-of-type': {
      fontSize: 14,
      height: 14,
      lineHeight: '14px',
      color: '#666',
    },
  },
}))

export default function Section({
                                  title = '',
                                  describe = '',
                                  children,
                                  ...rest
                                }) {
  return (
    <Root {...rest}>
      <Box>
        <div>{title}</div>
        <Box>
          {describe && (
            <Divider
              textAlign="left"
              sx={{
                '&::before': {
                  width: 15,
                },
              }}
            >
              {describe}
            </Divider>
          )}
        </Box>
      </Box>
      {children}
    </Root>
  )
}
